<div>
  
    <nz-collapse>
      <nz-collapse-panel [nzHeader]="'sql info'">
          <button nz-button nzType="primary" nzShape="circle" class="add-new-btn" (click)="createconfig()">+</button>

          <nz-descriptions   *ngFor="let jdbcconfig of pconfiglist;let i = index;" nzTitle={{i+1}} nzBordered="true">
            <nz-descriptions-item nzTitle="Url">{{jdbcconfig.url}}</nz-descriptions-item>
            <nz-descriptions-item nzTitle="Port">{{jdbcconfig.port}}</nz-descriptions-item>
            <nz-descriptions-item nzTitle="User Name">{{jdbcconfig.username}}</nz-descriptions-item>
            <nz-descriptions-item nzTitle="User Password">{{jdbcconfig.password}}</nz-descriptions-item>
            <nz-descriptions-item nzTitle="Basename">{{jdbcconfig.basename}}</nz-descriptions-item>
            <nz-descriptions-item nzTitle="Tablename">{{jdbcconfig.tablename}}</nz-descriptions-item>
            <nz-descriptions-item nzTitle="删除"><button nz-button nzType="primary" (click)="deleteconfig(i)">&nbsp;&nbsp;</button></nz-descriptions-item>
            <nz-descriptions-item nzTitle="修改"><button nz-button nzType="primary" (click)="updateconfig(i)">&nbsp;&nbsp;</button></nz-descriptions-item>
        </nz-descriptions>
      </nz-collapse-panel>



    </nz-collapse>
      <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
          <ng-container *nzModalContent>
      
              <nz-card [nzBordered]="false" [nzTitle]="' JDBC source '" [nzLoading]="false">
                  <form nz-form class="login-form">
                      <nz-form-item>
                          <nz-input-group>
                              <input type="text" class="form-item" name="destIP" nz-input placeholder="URL" 
                              [(ngModel)]="newconfig.url"/>
                          </nz-input-group>
                      </nz-form-item>
                      <nz-form-item>
                        <nz-input-group>
                            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>Port</nz-form-label>
                            <nz-input-number class="form-item form-item-count" name="Port" [nzMin]="0" [nzMax]="55000" [nzStep]="1"
                                [(ngModel)]="newconfig.port" placeholder="Port"></nz-input-number>
                        </nz-input-group>
                    </nz-form-item>
                      <nz-form-item>
                          <nz-input-group>
                              <input type="text" class="form-item" name="UserName" nz-input placeholder="UserName" 
                              [(ngModel)]="newconfig.username" />
                          </nz-input-group>
                      </nz-form-item>
                      <nz-form-item>
                        <nz-input-group>
                            <input type="text" class="form-item" name="driveClassName" nz-input placeholder="driveClassName" 
                            [(ngModel)]="newconfig.driveClassName" />
                        </nz-input-group>
                    </nz-form-item>
      
                      <nz-form-item>
                          <nz-input-group>
                              <input type="text" class="form-item" nz-input name="destUserPwd"
                                  placeholder="UserPassword"  
                                  [(ngModel)]="newconfig.password"/>
                          </nz-input-group>
                      </nz-form-item>
      
      
                      <nz-form-item>
                          <nz-input-group>
                              <input type="text" class="form-item" nz-input nz-input name="destBase" placeholder="connectorType" 
                              [(ngModel)]="newconfig.connectorType"/>
                          </nz-input-group>
                      </nz-form-item>
                      <nz-form-item>
                        <nz-input-group>
                            <input type="text" class="form-item" nz-input nz-input name="destBase" placeholder="Base Name" 
                            [(ngModel)]="newconfig.basename"/>
                        </nz-input-group>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-input-group>
                            <input type="text" class="form-item" nz-input nz-input name="destBase" placeholder="Table Name" 
                            [(ngModel)]="newconfig.tablename"/>
                        </nz-input-group>
                    </nz-form-item>
 

                      <button nz-button nzType="dashed" class="login-form-button login-form-margin "
                      (click)="createnewconfig()">
                          <i nz-icon nzType="download"></i>SubMit A Job
                          <br>
                          JDBC
                      </button>
      
                  </form>
      
              </nz-card>
          </ng-container>
      </nz-modal>
      
      </div>
    